<template>
  <div>
    <a-card>
      <a-space>
        <a-input v-model:value="query.searchKey" style="margin-left: 25px" size="large"
          @keyup.enter.native="getList(query)" placeholder="根据关键词查询">
          <template #prefix>
            <SearchOutlined />
          </template>
        </a-input>
        <a-button type="primary" style="margin-left: 500px; margin-bottom: 5px; width: 100px;" @click="addItem">
          <template #icon><plus-outlined /></template>新增
        </a-button>
      </a-space>

      <a-list item-layout="vertical" size="large" :data-source="listData">
        <template #renderItem="{ item }">
          <a-list-item key="item.title">
            <!-- 下载 -->
            <template #actions>
              <span v-for="{ icon, text } in actions" :key="icon">
                <a :href="`/dev-api/ufs/preview/${item.caseFileID}`">
                  <component :is="icon" style="margin-right: 8px" />
                  {{ text }}
                </a>
                <a-button type="link" @click="openDetail(item)">预览</a-button>
                <a-button type="link" @click="edit(item)">编辑</a-button>
                <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="del(item.id)">
                    <a-button type="link" danger>删除</a-button>
                  </a-popconfirm></AntdZh>
              </span>
            </template>
            <!-- 文件图片 -->
            <template #extra>
              <img v-if="item.fileType == 'docx' || item.fileType == 'doc'" width="160" alt="logo" :src="docx" />
              <img v-if="item.fileType == 'pptx'" width="160" alt="logo" :src="pptx" />
              <img v-if="item.fileType == 'pdf'" width="160" alt="logo" :src="pdf" />
            </template>
            <a-list-item-meta :description="item.description">
              <template #title>
                <a :href="`/dev-api/ufs/preview/${item.caseFileID}`">{{
                  `${item.fileName} ${item?.wellId || ""} ${item.wellType || ""}` }}</a>
              </template>
              <template #avatar><a-avatar :src="item.avatar" /></template>
            </a-list-item-meta>
            <!-- {{ ` 遇卡原因：${item.jammingReason || "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"}` }}<br /> -->
            {{ `摘要：${item.keyword || "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"}` }}
          </a-list-item>
        </template>
      </a-list>
      <AntdZh>
        <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total"
          @change="getList" />
      </AntdZh>
    </a-card>
    <!-- 新版添加或修改部门对话框 -->
    <AntdConfirmModal :title="title ? '新增信息' : '编辑信息'" ref="modalRef" width="700px" :keepSlot="false"
      @confirm="submitForm">
      <a-form :model="form" name="basic" :label-col="{ span: 10 }">
        <a-row>
          <a-col :span="12">
            <a-form-item label="方案类型" name="constructionPlanType">
              <a-input v-model:value="props.type" style="width: 355px;" :disabled="true" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="18">
            <a-form-item label="摘要" name="keyword" style="margin-left: -115px;">
              <a-textarea v-model:value="form.keyword" controls-position="right" :rows="4" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="18">
            <div v-if="title == true">
              <a-form-item label="上传案例文件" style="margin-left: -120px;">
                <a-upload-dragger v-model:fileList="fileList" withCredentials name="caseFile"
                  :before-upload="beforeUpload" :maxCount="1" @remove="handleRemove">
                  <p class="ant-upload-drag-icon">
                    <inbox-outlined></inbox-outlined>
                  </p>
                  <p class="ant-upload-text">点击或者拖拽文件到此处上传</p>
                </a-upload-dragger>
              </a-form-item>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </AntdConfirmModal>
    <!-- 报告预览-->
    <a-drawer width="65%" title="详细信息" v-if="open" v-model:visible="open">
      <vue-office-docx :src="`/dev-api/ufs/download/${fileId}`" />
    </a-drawer>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import docx from "@/assets/images/docx.svg";
import pptx from "@/assets/images/pptx.svg";
import pdf from "@/assets/images/pdf.svg";
import { DownloadOutlined, SearchOutlined, InboxOutlined } from "@ant-design/icons-vue";
import { queryList, createOne, deleteOne, updateOne } from "@/api/salvage/case.js";
import VueOfficeDocx from '@vue-office/docx';
import request from '@/utils/request'
import useApp from "@/hooks";
const { $ } = useApp();
const listData = ref([]);
const total = ref(null)
const fileList = ref([]);
const title = ref(null);
const modalRef = ref(null);
const open = ref(false)
const query = ref({
  order: "ASC",
  pageNum: 1,
  pageSize: 5,
  sortBy: "id",
  searchKey: "",
  constructionPlanType: props.type,
});
const form = ref({
  constructionPlanType: "",
  keyword: "",
  caseFile: "",
})
const props = defineProps({
  type: {
    type: String,
  },
});
const actions = [
  {
    icon: DownloadOutlined,
    text: "下载",
  },
];
const fileForm = ref({
  file: null,
});
const fileId = ref('')
const beforeUpload = (file) => {
  // 记录文件
  fileForm.value.file = file;
};
// 移除文件
const handleRemove = (file) => {
  fileForm.value.file = null;
};
// 新增
function addItem() {
  title.value = true
  form.value = {}
  modalRef.value.openModal()
}
//编辑
function edit(e) {
  title.value = false
  form.value = e
  getList();
  modalRef.value.openModal();
};
// 删除
const del = (key) => {
  deleteOne(key).then((res) => {
    $.showToast({
      title: "删除成功",
      icon: "success",
    });
    getList();
  });
};
function getList() {
  queryList(query.value).then((res) => {
    // 提取文件的扩展名
    res.content.forEach((item) => {
      let index = item.fileName.lastIndexOf("."); //获取索引位置
      console.log(index);
      item.fileType = item.fileName.substr(index + 1); //截取从最后一个点号的下一个字符开始到字符串末尾的子字符串
    });
    listData.value = res.content;
    total.value = res.totalElements
  });
}
getList();

// 提交
function submitForm() {
  form.value.caseFile = fileForm.value.file
  form.value.constructionPlanType = props.type
  console.log(form.value)
  // 新建
  if (title.value == true) {
    if (form.value.caseFile == null) {
      $.showToast({
        title: "文件不允许为空",
        icon: "warn",
      });
    }
    request.post("/salvage/cases", form.value, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((res) => {
      console.log('createOne', res);
      $.showToast({
        title: " 上传成功",
        icon: "success",
      });
      getList()
    });
  } else if (title.value == false) { //编辑
    updateOne(form.value).then((res) => {
      $.showToast({
        title: "修改成功",
        icon: "success",
      });
      getList()
    });
  }
  modalRef.value.closeModal()
}
// 预览
function openDetail(objId) {
  console.log('objId', objId);
  open.value = true;
  fileId.value = objId.caseFileID
}
</script>
